<template>
  <div class="center">
    <div class="center-box">
      <iframe width="100%" height="100%" style="border: none;" :src="routerList[curIndex].url"></iframe>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const curIndex = ref(0)
const routerList = [
  {
    name: '卫星影像',
    url: 'http://ninganfarm.upyuns.com/#/'
  },
  {
    name: '作物种植分布',
    url: 'http://ninganfarm.upyuns.com/#/planting'
  },
  {
    name: '作物长势监测',
    url: 'http://ninganfarm.upyuns.com/#/zhangshi'
  },
  {
    name: '耕地质量监测',
    url: 'http://ninganfarm.upyuns.com/#/Hardware'
  },
  {
    name: '非农非粮监测',
    url: 'http://ninganfarm.upyuns.com/#/dikuai'
  },
  {
    name: '土壤监测',
    url: 'http://ninganfarm.upyuns.com/#/NewSoil'
  },
  {
    name: '灾害监测',
    url: 'http://ninganfarm.upyuns.com/#/damage'
  }
]

const handleSkip = (val) => {
  curIndex.value = val
}

defineExpose({
  handleSkip
})
</script>

<style lang="scss" scoped>
.center {
  flex: 1;
  height: 100%;
  color: #fff;
  padding: .0329rem 0;
  box-sizing: border-box;

  .center-box {
    height: 100%;
  }
}
</style>
